<template>
  <view class="">
    <view class="box" v-if="isShow">
      <image src="http://www.danshensuofen.online/images/yongshan/jiantou.png" alt=""></image>
      <view>请点击此处</view>
      <view>使用默认浏览器打开</view>
    </view>
    <view id="content"></view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { getAirPayUrl } from '@/utils/req/api.js'
import { isWechat } from '@/utils/commen'
export default {
  data() {
    return {
      isShow: false,
      id: '',
      token: '',
    }
  },
  onLoad(options) {
    let { id, token } = options
    this.id = id ? id : ''
    this.token = token ? token : ''
    if (id) {
      uni.removeStorageSync('payId')
      uni.removeStorageSync('hasAirPay')
    }
  },
  onShow() {
    console.log(uni.getStorageSync('hasAirPay'), Boolean(uni.getStorageSync('hasAirPay')))
    if (isWechat()) {
      this.isShow = true
    } else {
      //判断是否已经支付
      if (!uni.getStorageSync('hasAirPay')) {
        console.log('我还未支付')
        //未支付
        this.getAirPayUrl(this.id)
      } else {
        //已经支付
        console.log('我已经支付')
        uni.removeStorageSync('hasAirPay')
        this.$nextTick(() => {
          this.$showToast.call(this, '请返回微信查看支付结果', 'default', '1000000')
        })
      }
    }
  },
  methods: {
    async getAirPayUrl(id) {
      uni.request({
        url: getApp().globalData.BASE_URL + '/hc/hcAliPay/queryById',
        method: 'get',
        data: {
          id: this.id,
        },
        header: {
          'X-Access-Token': this.token,
        },
        success(res) {
          console.log('res', res)
          document.querySelector('#content').innerHTML = res.data.result.body
          console.log(document.getElementsByTagName('form'))
          document.getElementsByTagName('form')[0].submit()
          uni.setStorageSync('hasAirPay', true)
          uni.setStorageSync('payId', this.id)
          console.log('------', uni.getStorageSync('hasAirPay'))
        },
        fail(error) {
          console.log('error', error)
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.box {
  background-color: rgba(0, 0, 0, 0.55);
  height: 100vh;
  width: 100%;

  image {
    width: 35%;
    margin-left: 60%;
    margin-top: 20rpx;
  }

  view {
    margin-top: 20rpx;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-size: 32rpx;
  }
}
</style>
